<template>
	<view>
		<view class="jssm">
			<van-tabs v-model="active" animated duration='0.5'>
				<van-tab title="直推介绍">
					<view class="nr">
						<p>推广收益=客户查询价-推广人成本价</p>
						<p>在下方“自定义价格”处选择报告类型，设置客户查询价(元)即可了解推广收益及我的成本价。</p>
					</view>
				</van-tab>
				<van-tab title="报告说明">
					<view class="nr" v-if="array.length>0">
						<p>{{array[index].introduce}}</p>
					</view>
				</van-tab>
			</van-tabs>
		</view>

		<van-cell-group inset>
			<van-cell title="自定义价格" />
			<template v-if="array.length>0">
				<van-cell title="报告名称" is-link icon="shop-o">
					<div @click="$refs.mp.$el.click()">
						{{array[index].name}}
					</div>
				</van-cell>
				<van-cell title="客户查询价(元)" is-link icon="shop-o">
					<div @click="openPricing">
						{{ zeroTwo( array[index].basePricing + array[index].promotionAdd )}}
					</div>
				</van-cell>

				<van-cell value="内容" style="padding: 5px 16px 5px 35px;">
					<template #title>
						<div class="sycb">
							推广收益为
							<span>{{ zeroTwo(array[index].promotionAdd) }}元 </span>
						</div>
					</template>
					<div class="sycb">
						我的成本为
						<span>{{ zeroTwo( array[index].basePricing) }}元</span>
					</div>
				</van-cell>
			</template>
		</van-cell-group>
		<view id="but" @click="go('home/invite?index=' + array[index].code)">
			点击立即推广
		</view>

		<picker ref="mp" @change="choiceAlter" :value="index" range-key='name' :range="array"></picker>

		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="xgjg">
					<p style="margin-top: 10px;">配置客户查询价格（元）</p>
					<view class="sr">
						<span id="rmb">¥</span>
						<input type="number" v-model="pricing" @input="validateInput" placeholder="请输入客户查询价格" />
					</view>
					<hr>
					<view class="ms">
						<view>
							<p>
								推广收益为 <span>{{zeroTwo(pricing - dj)}}</span>
							</p>
						</view>
						<view>
							<p>
								我的成本为<span>{{zeroTwo(dj)}}</span>
							</p>
						</view>
					</view>
				</view>
				<view class="xgjg">
					<p>
						说明(仅供参考)：
					</p>
					<p>
						推广收益=客户查询价<span>{{pricing}}</span>- 我的成本价<span>{{ zeroTwo(dj)}}</span>
					</p>
					<!-- <p>
						我的成本=提价成本<span>0</span>+底价成本9<span>9</span>
					</p> -->
				</view>
				<button @click="setPromotionAdd()">确认</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		promotion,
		setPrice
	} from '@/api/product'

	export default {
		data() {
			return {
				active: 0,
				array: [],
				index: 0,

				dj: null,
				pricing: null

			};
		},
		onLoad() {
			promotion().then(res => {
				if (res.code == 200)
					this.array = res.data
			})
		},
		methods: {
			validateInput() {
				if (this.pricing < this.dj) {
					this.$modal.msgError('定价不能小于' + this.zeroTwo(this.dj));
					this.pricing = null
				}
			},
			choiceAlter(event) {
				this.index = event.detail.value
			},
			openPricing() {
				let index = this.index
				let sy = this.array[index].promotionAdd
				this.dj = this.array[index].basePricing
				this.pricing = this.zeroTwo(sy + this.dj)
				this.$refs.popup.open()
			},

			setPromotionAdd() {
				if (this.pricing < this.dj) {
					this.$modal.msgError('定价不能小于' + this.zeroTwo(this.dj))
				} else {
					setPrice({
						productId: this.array[this.index].id,
						type: 'TGSY',
						amount: this.pricing - this.dj
					}).then(res => {
						if (res.code == 200) {
							promotion().then(res => {
								if (res.code == 200)
									this.array = res.data
							})
							this.$modal.msgSuccess("修改成功")
						} else {
							this.$modal.msgError(res.msg)
						}
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	.jssm {
		margin: 15px;
		padding-top: 5px;
		border-radius: 5px;
		background-color: white;
	}

	.jssm .nr {
		margin: 15px;
		padding: 15px;
		background-color: wheat;
		border-radius: 5px;
		min-height: 130px;
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);

		p:nth-child(1) {
			padding-bottom: 10px;
			color: #ea956f;
		}

		p:nth-child(2) {
			line-height: 24px;
			color: #ac7555;

		}
	}

	.sycb {
		color: #969799;
		font-size: 12px;

		span {
			color: rosybrown;
		}
	}


	#but {
		padding: 10px;
		text-align: center;
		margin: 15px;
		border-radius: 10px;
		color: white;
		background-color: #fb7b5e;
	}

	.popup-content {
		width: 90vw;
		border-radius: 6px;
		padding: 12px;
		background-color: #f4f5f9;

		.xgjg {
			background-color: #fff;
			border-radius: 6px;
			padding: 5px 10px;

			p {
				font-size: 12px;
				line-height: 30px;
				color: #86888b;

				span {
					color: #fb7b5e;
				}
			}

			.sr {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 10px 0;

				span {
					font-size: 30px;
				}

				input {
					margin-left: 10px;
					font-size: 20px;
				}

			}

			.ms {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.xgjg:nth-child(1) {
			margin-bottom: 12px;
		}

		button {
			margin-top: 10px;
			padding: 10px;
			background-color: #c4d6ff;
		}
	}
</style>